<template>
	<!-- 电梯维修添加/编辑 -->
	<div class="compile weixiuBox">
		<el-dialog :close-on-click-modal='false' :append-to-body='true' :before-close='close' :close-on-press-escape='false'
		 :title="title" :visible.sync="addAndCompileShow" custom-class="weixiuBoxDialog">
			<el-form :model="form" :rules="rules" ref="form" v-loading='isLoading' label-width="120px" size="mini">
				<el-row>
					<el-col :span="10">
						<el-form-item label="电梯注册号:" prop="registCode">
							<el-select :disabled="detailDisable" v-model="form.registCode" placeholder="请选择电梯注册号" size="mini" filterable
							 clearable>
								<el-option :label="item.register_code" :value="item.register_code" v-for="item in registCodeArr" :key='item.id'></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-button type="primary" class='fl' style='margin-left: 6px;' @click='filterCode' v-if="!detailDisable">选择</el-button>
				</el-row>
				<el-row>
					<el-col :span="10">
						<el-form-item label="维修人员:" prop="person">
							<el-select :disabled="detailDisable" filterable v-model="form.person" placeholder="请选择维修人员" multiple size="mini"
							 clearable>
								<el-option :label="item.real_name" :value="item.id" v-for="item in personArr" :key='item.id'></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10">
						<el-form-item label="维修项目:" prop="mainType">
							<el-select :disabled="detailDisable" multiple filterable placeholder="请选择维修类型" size="mini" clearable v-model="form.mainType"
							 @change="selectedChange">
								<el-option v-for="item in mainTypeArr" :disabled="item.costs == null" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="13">
						<div style="margin-top:5px">
							(如不可选中，则该维修项目没有设置费用，请在业务配置管理处调整)
						</div>
					</el-col>
				</el-row>

				<el-row v-for="item in serveLoopArr" :key='item.id'>
					<el-col :span="10">
						<el-form-item label="项目名称:">
							<el-input size="mini" v-model="item.repair_type_name" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="数量:">
							<el-input-number size="mini" v-model="item.number" :disabled="detailDisable" :min="1" label="请选择维修数量"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="5" style='margin-left: 15px;'>
						<el-form-item label="单价:" label-width="50px">
							<div style="text-align: left;">
								{{item.costs ? item.costs : '无'}}&nbsp;(元)
							</div>
							<!-- <el-input-number size="mini" v-model="item.number" :min="1" label="请选择维修数量"></el-input-number> -->
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10">
						<el-form-item label="开始时间:" prop="planTime">
							<el-date-picker :disabled="detailDisable" v-model="form.planTime" format='yyyy-MM-dd' value-format='yyyy-MM-dd'
							 type="date" placeholder="请选择计划开始时间" size="mini" @change="changeTime" clearable>
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="结束时间:" prop="endTime">
							<el-date-picker v-model="form.endTime" format='yyyy-MM-dd' value-format='yyyy-MM-dd' type="date" placeholder="请选择计划结束时间"
							 size="mini" :disabled="disAbleTime || detailDisable" :picker-options="pickerOptions" clearable>
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="10">
						<el-form-item label="工时:" prop="work_hours">
							<el-input-number v-model="form.work_hours" :disabled="detailDisable" :min="0" :precision="2" :step="0.1" size="mini"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="当前工时价:">
							<el-input v-model="form.workMoney" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="1">
						<span style="margin-top: 5px;display: inline-block;">元</span>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10">
						<el-form-item :label="currentMoney+':'">
							<el-input v-model="allPayCosts" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="1">
						<span style="margin-top: 5px;display: inline-block;">元</span>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10">
						<el-form-item label="故障情况:">
							<el-upload :on-preview="upLoadPreview" action="" accept=".jpg,.jpeg,.png" :file-list="fileList" :on-change="upLoadChange"
							 :on-remove="upLoadRemove" :auto-upload="false" list-type="picture" name="upfile" :disabled='detailDisable'>
								<el-button size="mini" type="primary" :disabled='detailDisable'>点击上传故障照片</el-button>
								<div slot="tip" class="upLoadText">只能上传JPG/PNG/JPEG图片,大小不超过800kb/最多上传10张</div>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
				<div v-if="title !=='新建电梯维修'">
					<el-row>
						<el-col :span="10">
							<el-form-item label="维修前照片:">
								<div class="flexBox">
									<el-image class="loopPic" :src="item" fit="cover" v-for="(item,index) in pictureArr" :key='index' @click='lookBigpic(item)'>
										<div slot="error" class="image-slot">
											<i class="el-icon-picture-outline"></i>
										</div>
									</el-image>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="10">
							<el-form-item label="维修后照片:">
								<div class="flexBox">
									<el-image class="loopPic" :src="item" fit="cover" v-for="(item,index) in pictureSuccessArr" :key='index'
									 @click='lookBigpic(item)'>
										<div slot="error" class="image-slot">
											<i class="el-icon-picture-outline"></i>
										</div>
									</el-image>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="10">
							<el-form-item label="同意维修签名:">
								<div class="flexBox">
									<el-image class="loopPic" :src="signature" fit="cover" 
									 @click='lookBigpic(signature)'>
										<div slot="error" class="image-slot">
											<i class="el-icon-picture-outline"></i>
										</div>
									</el-image>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="10">
							<el-form-item label="维修结束签名:">
								<div class="flexBox">
									<el-image class="loopPic" :src="signature_success" fit="cover" 
									 @click='lookBigpic(signature_success)'>
										<div slot="error" class="image-slot">
											<i class="el-icon-picture-outline"></i>
										</div>
									</el-image>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="submit('form',1)" v-loading='ensureBtn' type="success" v-if="isShowCheck">审核通过</el-button>
				<el-button @click="close">取 消</el-button>
				<el-button type="primary" @click="submit('form')" v-loading='ensureBtn' v-if="!detailDisable">确 定</el-button>
			</div>
		</el-dialog>
		<secondDialog v-if='innerVisible' :innerVisible='innerVisible' @closeScondDilog='closeScondDilog' @dataList='dataList'></secondDialog>
		<el-dialog custom-class="imgDialogShow" :visible.sync="imgDialogShow" :append-to-body='true' :before-close='closeImg'>
			<img :src="dialogImgUrl" alt="">
		</el-dialog>
	</div>
</template>

<script>
	import secondDialog from "./secondDialog.vue"
	import {
		registCode,
		person,
		mainType,
		planTime,
		endTime,
		work_hours
	} from './rule.js'
	import {
		loadFn,
		axiosPost,
		noLoadingPost,
		axiosGet,
		axiosDelete,
		axiosPut,
		moment,
		axiosChange
	} from "@/common.js";
	export default {
		props: {
			addAndCompileShow: {
				type: Boolean,
				default () {
					return false
				}
			},
			title: {
				type: String,
				default () {
					return ''
				}
			},
			rowId: {
				type: Number,
				default () {
					return 0
				}
			},
			statusName: {
				type: Number,
				default () {
					return 0
				}
			},
		},
		mounted() {
			this.getworkHourMoney()
			this.getMessage()
			if (this.statusName == 70) {
				this.currentMoney = '维修费用'
			} else {
				this.currentMoney = '预计费用'
			}
			if (this.rowId && this.title == '编辑电梯维修' || this.title == '电梯维修详情') {
				if (this.title == '编辑电梯维修' && this.statusName == 0) {
					this.isShowCheck = true
				}
				this.getCompileList()
			}
			if (this.title == '电梯维修详情') {
				this.detailDisable = true
			}
		},
		components: {
			secondDialog
		},
		data() {
			return {
				ensureBtn: false,
				isLoading: true,
				innerVisible: false,
				rules: {
					registCode,
					person,
					mainType,
					planTime,
					endTime,
					work_hours
				},
				form: {
					registCode: '',
					person: [],
					planTime: '',
					endTime: '',
					mainType: [],
					work_hours: '',
					workMoney: 0
				},
				fileList: [],
				registCodeArr: [],
				personArr: [],
				detailDisable: false,
				pictureArr: [],
				pictureSuccessArr: [],
				imgDialogShow: false,
				dialogImgUrl: '',
				mainTypeArr: [],
				selectedQuery: '',
				serveLoopArr: [],
				isShowCheck: false,
				currentMoney: '预计费用',
				imgDialogShow: false,
				signature:'',
				signature_success:''
			}
		},
		computed: {
			disAbleTime() {
				if (this.form.planTime) {
					return false
				} else {
					return true
				}
			},
			pickerOptions() {
				return {
					disabledDate: (time) => {
						return time.getTime() < moment(this.form.planTime)
					}
				}
			},
			allPayCosts: {
				get() {
					let pay = 0
					this.serveLoopArr.map((item) => {
						if (item.costs) {
							pay += Number(item.costs) * item.number
						}
					})
					let value = this.form.workMoney * this.form.work_hours
					pay += value
					return pay.toFixed(2)
				},
				set(newValue) {
					// pay = newValue
				}

			},
		},
		methods: {
			//上传照片接口
			uploadImage(imgList, num) {
				if (imgList.leng != 0) {
					const formData = new FormData();
					formData.append("upfile", imgList[num].raw)
					return this.$axios({
						url: "/utils/upload/",
						method: "post",
						data: formData
					})
				} else {
					console.log('没有照片')
				}
			},
			upLoadChange(file, fileList) {
				const isLt2M = file.size / 1024 < 800;
				if (file.name.split(".")[1] != "jpg" && file.name.split(".")[1] != "png" && file.name.split(".")[1] != "jpeg") {
					this.$message.error('只能上传JPG/PNG/JPEG格式图片');
					this.fileList = fileList.slice(0, -1);
					return
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 800kb!,请重新上传');
					this.fileList = fileList.slice(0, -1);
					return
				}
				this.fileList = fileList.slice(-10);
			},
			//删除文件之前的函数
			upLoadRemove(file, fileList) {
				this.fileList = fileList;
				console.log(this.fileList)
			},
			//点击图片时触发
			upLoadPreview(file) {
				console.log(file)
				this.imgDialogShow = true
				this.dialogImgUrl = file.url
			},
			//获取当前工时价格
			getworkHourMoney() {
				let url = '/user/hour/price/'
				axiosGet(url, '', (res) => {
					if (res.code == 0) {
						this.form.workMoney = res.detail.hour_price
					} else {
						this.$message.error(res.detail.results)
					}
				})
			},
			//开始时间变化
			changeTime() {
				this.form.endTime = ''
			},
			//维修类型change变化
			selectedChange(res) {
				// console.log(res)
				this.serveLoopArr = []
				if (res.length !== 0) {
					this.mainTypeArr.map((item, index) => {
						res.map((item1) => {
							if (item.id == item1) {
								let obj = {
									repair_type_name: item.name,
									repair_content_id: item.id,
									id: item.id,
									number: item.number ? item.number : 1,
									costs: item.costs
								}
								this.serveLoopArr.push(obj)
							}
						})
					})
					console.log(this.serveLoopArr)
				}
			},
			//查看图片大图
			lookBigpic(img) {
				this.imgDialogShow = true
				this.dialogImgUrl = img
			},
			//关闭放大图片弹窗
			closeImg() {
				this.imgDialogShow = false
			},
			//获取编辑数据
			getCompileList() {
				let url = '/manu/elevator/repair/' + this.rowId
				axiosGet(url, {}, (res) => {
					if (res.code == 0) {
						this.form.registCode = res.detail.register_code
						this.signature = res.detail.signature
						this.signature_success = res.detail.signature_success
						this.personArr = []
						if (res.detail.notify_person) {
							if (res.detail.notify_person.split(',').length == res.detail.notify_person_ids.length) {
								this.form.person = res.detail.notify_person_ids
								res.detail.notify_person_ids.map((item, index) => {
									let obj = {
										real_name: res.detail.notify_person.split(',')[index],
										id: item
									}
									this.personArr.push(obj)
								})
							}
						}
						if(res.detail.pictures.length != 0){
							 this.fileList = res.detail.pictures.map((item)=>({
									name:'',
									url:item
							 }))
						}
						res.detail.repair_content.map((item) => {
							if (!item.number) {
								item.number = 1
							}
							return item
						})
						this.form.mainType = res.detail.repair_content.map((item) => {
							return item.id
						})
						this.mainTypeArr = res.detail.repair_content
						this.serveLoopArr = res.detail.repair_content
						this.form.planTime = res.detail.start_planning_time
						this.form.endTime = res.detail.end_planning_time
						this.pictureArr = res.detail.pictures
						this.pictureSuccessArr = res.detail.pictures_success
						this.form.work_hours = res.detail.work_hours
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//打开二层dialog
			filterCode() {
				this.innerVisible = true
			},
			//二层弹窗确定
			dataList(res) {
				console.log(res)
				this.innerVisible = false
				this.form.registCode = res.id
				this.getMessage()
			},
			//二层弹窗关闭
			closeScondDilog() {
				this.innerVisible = false
			},
			//获取一层dialog数据
			getMessage() {
				axiosGet('/basic/elevator/repair/', {}, (res) => {
					this.isLoading = false
					if (res.code == 0) {
						this.personArr = res.detail.users
						this.registCodeArr = res.detail.elevators
						this.mainTypeArr = res.detail.content
					} else {
						// this.$message.error(res.detail)
					}
				})
			},
			close() {
				this.$emit('closeMask')
			},
			//新建确定
			submit(formName, value) {
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						this.imgArr = []
						let permises = []
						for (let i = 0; i < this.fileList.length; i++) {
							if (this.fileList[i].raw) {
								permises.push(this.uploadImage(this.fileList, i))
							} else {
								this.imgArr.push(this.fileList[i].url)
							}
						}
						const res = await Promise.all(permises)
						for (let i = 0; i < res.length; i++) {
							res[i].code == 0 && this.imgArr.push(res[i].detail)
						}
						let arr = []
						this.serveLoopArr.map((item) => {
							let obj = {
								repair_content_id: item.id,
								number: item.number
							}
							arr.push(obj)
						})
						this.ensureBtn = true
						let data = {
							pic: this.imgArr.length != 0 ? this.imgArr.join(',') : '',
							maintenance_type: 0,
							register_code: this.form.registCode,
							person: this.form.person,
							start_planning_time: this.form.planTime,
							end_planning_time: this.form.endTime,
							content: arr,
							work_hours: this.form.work_hours
						}
						if (value == 1) {
							data.status = 10
							data.audited = 1
						}
						let url = ''
						let method = ''
						if (this.rowId && this.title == '编辑电梯维修') {
							url = '/manu/elevator/repair/' + this.rowId
							method = 'put'
						} else {
							url = '/manu/elevator/repair/'
							method = 'post'
						}
						axiosChange(url, method, data, (res) => {
							this.ensureBtn = false
							if (res.code == 0) {
								if (value == 1) {
									this.$message({
										type: 'success',
										message: '审核成功'
									})
									this.isShowCheck = false
								} else {
									this.$message({
										type: 'success',
										message: '操作成功'
									})
									this.$emit('closeMask', 2)
								}
							} else {
								this.$message.error(res.detail.result)
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.colItem {
		display: flex;
		flex-direction: row;

		.searchCode {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 120px;
		}
	}

	.flexBox {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;

		.loopPic {
			width: 100px;
			height: 100px;
			margin: 1%;
			cursor: pointer;
		}
	}
</style>
